<script lang="ts" setup>
import type { FormInstance } from "element-plus";

const form = ref({
    type: 1,
    time: ["00:00:00", "23:59:59"],
  }),
  weekCheckList = ref([]),
  moonCheckList = ref([]),
  submiting = ref(false);
const formRef = ref();

const weekList = [
  { name: "周一", value: "1" },
  { name: "周二", value: "2" },
  { name: "周三", value: "3" },
  { name: "周四", value: "4" },
  { name: "周五", value: "5" },
  { name: "周六", value: "6" },
  { name: "周日", value: "7" },
];

const props = defineProps({
  modelValue: {
    require: true,
    type: Object,
    default: () => {
      return {};
    },
  },
});

const emits=defineEmits(['update:modelValue'])

const stopWatch = watch(
  () => props.modelValue,
  (val: any) => {
    if (formRef.value) formRef.value.resetFields();
    form.value = Object.assign({}, form.value, val);
    if (val.type == 1) weekCheckList.value = val.day.split(",");
    else if (val.type == 2)
      moonCheckList.value = val.day
        .split(",")
        .map((item: string) => Number(item));
    if (val.startTime) form.value.time = [val.startTime, val.endTime];
    nextTick(() => {
      stopWatch();
    });
  },
  {
    immediate: true,
  }
);

const validateCheck = (rule: any, value: any, callback: any) => {
  if (form.value.type == 1 && weekCheckList.value.length <= 0) {
    callback(new Error("请选择时间限制"));
  } else if (form.value.type == 2 && moonCheckList.value.length <= 0) {
    callback(new Error("请选择时间限制"));
  }
  callback();
};

const rule = {
  time: [{ required: true, message: "请选择时间区间", trigger: "change" }],
  type: [{ required: true, message: "请选择时间类型", trigger: "change" }],
  checkList: [{ validator: validateCheck }],
};

const save = () => {
  return new Promise((resolve, reject) => {
    (formRef.value as FormInstance).validate((valid) => {
      if (valid) {
        let rule = {
          type: form.value.type,
          day: "",
          startTime: "",
          endTime: "",
        };
        if (rule.type == 1) {
          rule.day = weekCheckList.value.join(",");
        } else {
          rule.day = moonCheckList.value.join(",");
        }
        rule.startTime = form.value.time[0];
        rule.endTime = form.value.time[1];
        emits('update:modelValue',rule)
        resolve(true)
      } else {
        resolve(false);
      }
    });
  });
};

defineExpose({ save });
</script>
<template>
  <div class="form">
    <el-form :model="form" ref="formRef" :rules="rule" label-width="auto">
      <el-form-item label="时间类型：" prop="type">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option label="每周" :value="1"> </el-option>
          <el-option label="每月" :value="2"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="checkList">
        <template v-if="form.type == 1">
          <el-checkbox-group v-model="weekCheckList">
            <el-checkbox
              v-for="(week, index) in weekList"
              :key="`week_${index}`"
              :label="week.value"
              >{{ week.name }}</el-checkbox
            >
          </el-checkbox-group>
        </template>
        <template v-if="form.type == 2">
          <el-checkbox-group v-model="moonCheckList">
            <el-checkbox
              v-for="(day, index) in 31"
              :key="`day_${index}`"
              :label="day"
              >{{ day }}号</el-checkbox
            >
          </el-checkbox-group>
        </template>
      </el-form-item>
      <el-form-item label="时间区间：" prop="time">
        <el-time-picker
          is-range
          v-model="form.time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          value-format="HH:mm:ss"
        >
        </el-time-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
